<template>
  <section>
    <el-row>
      <draggable :list="list" v-bind="$attrs">
        <div class="lamination">
          <el-button
            v-show="list.length === 0"
            size="mini"
            class="createBtn"
            @click="setPic(0, {})"
          >新建</el-button>
          <el-col v-for="(item, i) in list" :key="i" :span="18">
            <el-input
              v-model="item.title"
              placeholder="请输入内容"
              :disabled="true"
            >
              <el-button
                slot="append"
                icon="el-icon-s-tools"
                @click="setPic(i, item)"
              />
              <el-button
                slot="append"
                icon="el-icon-delete"
                @click="delImg4list(i)"
              />
            </el-input>
          </el-col>
        </div>
        <!-- <section class="v-img-item">
            <section class="del-img" @click="delImg4list(i)">
              <img src="./delete.png" alt="">
            </section>
          </section> -->
      </draggable>
      <!-- <el-col :span="6">
        <section class="add-img" @click="addImg">
          <i class="el-icon-plus" />
        </section>
      </el-col> -->
    </el-row>

    <!--设置文本内容-->
    <el-dialog
      v-if="linkFlag"
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="visible"
      title="设置文本"
      center
      :before-close="
        () => {
          visible = false
        }
      "
    >
      <el-form
        ref="form"
        :model="form"
        label-width="80px"
        style="max-height: 500px; overflow-y: auto"
        :rules="rules"
      >
        <el-form-item label="文本来源">
          <el-radio-group v-model="form.source" @change="sourceChange">
            <el-radio :label="1">本地</el-radio>
            <el-radio :label="2">文本库选取</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" />
        </el-form-item>
        <div v-if="form.source === 2">
          <el-form-item label="正文" prop="newText">
            <template>
              <NewTinyMce
                v-if="form.source === 2"
                :key="flag"
                ref="newTinyMce"
                v-model="form.newText"
              />
            </template>
          </el-form-item>
        </div>
        <div v-if="form.source === 1">
          <el-form-item label="正文" prop="text">
            <TinyMce
              v-if="form.source === 1"
              :key="flag1"
              ref="localTinyMce"
              v-model="form.text"
              :height="300"
            />
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          style="padding: 8px 30px"
          @click="visible = false"
        >关 闭</el-button>
        <el-button
          type="primary"
          style="padding: 8px 30px"
          @click="handleSubmit"
        >确 定</el-button>
      </div>
    </el-dialog>
    <!--    从文本库中选择-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      custom-class="live-dialog"
      :visible.sync="showPic"
      title="选择文本"
      width="1200px"
      center
    >
      <library @select="handleChoose" />
      <div slot="footer" class="dialog-footer">
        <el-button
          type="default"
          style="padding: 10px 30px"
          @click="showPic = false"
        >取 消</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import draggable from 'vuedraggable'
import library from './library'
import { getToken } from '@/utils/auth'
import { randomStringForId } from '@/utils'
import TinyMce from '@/components/Tinymce'
import NewTinyMce from '@/components/Tinymce'
export default {
  name: 'VImgData',
  components: { draggable, library, TinyMce, NewTinyMce },
  inject: ['focusId', 'pageVar', 'focusName', 'getListItemInfo'],
  props: {
    option: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {}
    }
  },
  data() {
    return {
      showPic: false,
      list: [],
      index: 0,
      visible: false,
      dialogTinyMce: false, // 富文本对话框
      form: {
        source: 1,
        newText: '',
        title: '',
        text: '',
        id: randomStringForId(8)
      },
      // title: '',
      // subTitle: '',
      rules: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
        newText: [{ required: true, message: '请输入正文', trigger: 'blur' }],
        text: [{ required: true, message: '请输入正文', trigger: 'blur' }]
      },
      upload: {
        headers: {
          token: getToken()
        },
        action: `${process.env.VUE_APP_BASE_API}files/upload`,
        result: '',
        loading: false
      },
      result: '',
      uploadFile: {
        viewId: '',
        view: '/API-DOCUMENT/document/file/download?id=',
        imagecropperKey: 0,
        showUpload: -1, // 1文本 2文本 3附件
        accept: '',
        fileType: '',
        fileIndex: 0,
        isOss: !!sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG')
      },
      fileViewId: '',
      linkFlag: true,
      fields: [],
      flag: 1,
      flag1: 1
    }
  },
  created() {
    if (this.option.value !== '') {
      try {
        this.list = this.option.value || []
      } catch (e) {
        console.log(e)
      }
    }
    if (this.option.field !== undefined) {
      this.setForm()
    }
  },
  methods: {
    getValue() {
      const obj = {
        [this.option.portName]: {
          code: '200'
        }
      }
      obj[this.option.portName]['data'] = this.list
      return obj
    },
    setValue(k) {
      // this.$set(this, 'list', k)
    },
    setForm() {
      const fields = this.option.field
      this.fields = fields
      fields.forEach((i) => {
        if (this.form[i.param] === undefined) {
          this.form[i.param] = ''
        }
      })
    },

    setFormPic() {
      if (this.form.source === 1) {
        this.uploadFile.showUpload = 2
      } else {
        this.showPic = true
      }
    },
    // 切换
    sourceChange(e) {
      this.showPic = e === 2
      this.flag = e * 5
      this.flag1 = e * 6
      // console.log(this.form, '切换')
      if (e === 1) {
        this.$nextTick(() => {
          this.$refs.localTinyMce.setContent(this.form.text)
        })
      } else {
        this.$nextTick(() => {
          this.$refs.newTinyMce.setContent(this.form.newText)
        })
      }
    },
    // 库选值
    handleChoose(obj) {
      if (obj.text) {
        this.form.newText = obj.text
        this.$refs.newTinyMce.setContent(this.form.newText)
      }
      this.form.title = obj.mainTitle
      this.showPic = false
      // console.log(this.form, '库选值')
    },
    beforeupload(file) {
      const _this = this
      const { maxSize } = this
      const size = file.size / 1024 / 1024 <= maxSize
      if (!size) {
        this.$confirm(`文件大小超过${maxSize}MB限制`, '提示', {
          confirmButtonText: '重新上传',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(() => {
          _this.$refs.upload.$children[0].handleClick()
        })
      }
      if (size) {
        this.upload.loading = true
      }
      return size
    },
    delImg4list(i) {
      this.list.splice(i, 1)
    },
    addImg() {
      this.list.push({
        // id: this.list.length,
        newText: '',
        imgUrl: '',
        title: '',
        subTitle: '',
        id: randomStringForId(8)
      })
    },
    // 设置
    setPic(i, item) {
      if (item.newText || item.text) {
        this.form = Object.assign({}, item)
      } else {
        this.form = {
          source: 1,
          title: '',
          text: '',
          id: randomStringForId(8)
        }
      }
      this.flag = this.flag * 3
      this.flag1 = this.flag1 * 4
      if (this.form.source === 1) {
        this.$nextTick(() => {
          this.$refs.localTinyMce.setContent(this.form.text)
        })
      } else {
        this.$nextTick(() => {
          this.$refs.newTinyMce.setContent(this.form.newText)
        })
      }
      // console.log(this.form, '设置')
      this.visible = true
      this.index = i
    },
    handleSubmit() {
      if (this.form.source === 1) {
        this.form.newText = ''
      } else {
        this.form.text = ''
      }
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.list[this.index] = this.form
          this.visible = false
        }
      })
      // console.log(this.list, 123)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/var.scss';
.v-img-item {
	position: relative;
	background: #fafafa;
	height: 80px;
	margin: 10px;
	video {
		width: 100%;
		height: 100%;
	}
	.del-img {
		position: absolute;
		width: 20px;
		height: 20px;
		top: 0;
		right: 0;
		> img {
			height: 100%;
			width: 100%;
		}
	}
}
.add-img {
	background: #fafafa;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 10px;
}
/deep/ .form-uploader {
	position: relative;
	.my-slot {
		display: block;
		padding-left: 50px;
	}
	.el-icon-delete {
		//position: absolute;
		//right: -20px;
		//top: 4px;
		float: right;
		&:hover {
			color: $mainColor;
			transform: scale(1.5);
		}
	}
	.el-image {
		width: 100px;
		height: auto;
	}
}
.lamination {
	display: flex;
	flex-direction: column;
	.createBtn {
		width: 80px;
		margin-bottom: 10px;
	}
}
</style>
